<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta http-equiv="Content-Type" content="text/html">
	<meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
	<!-- <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"> -->
	<script src="./js/flexible.debug.js"></script>
	<script src="./js/flexible_css.debug.js"></script>
	<meta name="format-detection" content="telephone=no">
	<meta name="format-detection" content="email=no">
	<title>首页</title>
	<link rel="stylesheet" href="css/reset.css">
	<link rel="stylesheet" href="./css/style.css">
	<link rel="stylesheet" href="./css/swiper-3.4.2.min.css">
	<link rel="stylesheet" href="./css/bootstrap.min.css">
</head>
<body>
	<!-- 头部图片 -->
		<nav class="swiper-container nav-bar">
			<div class="swiper-wrapper">
				<div class="swiper-slide swiper1"></div>
				<div class="swiper-slide swiper2"></div>
				<div class="swiper-slide swiper3"></div>
			</div>
		</nav>
	
		<!-- 中间搜索 -->
		<div class="search-wp">
			<div class="search-lb">
				<ul class="search-list">
					<li class="addr">
						<i class="addr"></i>
						<p class="cityname">北京市</p>
						<b class="right" data-toggle="modal" data-target="#myModal">
							<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
									<div class="modal-dialog" role="document">
										<div class="modal-content">
										<div class="modal-header">
											<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
											<h4 class="modal-title" id="myModalLabel">温馨提示</h4>
										</div>
										<div class="modal-body">
											定位失败，可能是您的手机关闭了定位权限。您可以去手机设置-隐私-打开定位，或者手动选择城市。			
										</div>
										<div class="modal-footer">
											<button type="button" class="btn btn-primary" data-dismiss="modal">选择城市</button>
											<button type="button" class="btn btn-default" >取消</button>
										</div>
										</div>
									</div>
									</div>
							<i></i>
							<span class="fujin">附近</span>
							<span class="fuhao">></span>
						</b>
					</li>
					<li class="data">
						<i class="icon-time"></i>
						<div>
							<p class="type">入住</p>
							<p class="mouth">11月17日<span class="week">今天</span></p>
						</div>
						<div class="line"></div> 
						<div>
							<p class="type">离店</p>
							<p class="mouth">11月18日<span class="week">明天</span></p>
						</div>
						<div class="type">1晚</div>
						<i class="next">></i>
					</li>
					<li class="name">
						<figure class="figure">
							<i class="n"></i>
							<input type="text" placeholder="酒店名称/位置不限">
							<i class="next2">></i>
						</figure>
					</li>
					<li class="name">
						<figure class="figure">
							<i class="n2"></i>
							<input type="text" placeholder="价格星际不限">
							<i class="next2">></i>
						</figure>
					</li>
				</ul>
			</div>
			<button class="mybtn">
				<i></i>
				搜索
			</button>
		</div>

		<!-- 中下图片搜索 -->
		<section class="list-section-wp">
			<section class="list-section">
				<figure>
					<i class="jipiao"></i>
					<figcaption>机票</figcaption>
				</figure>
				<figure>
					<i class="clear"></i>
					<figcaption>附近</figcaption>
				</figure>
				<figure>
					<i class="guoji"></i>
					<figcaption>国际</figcaption>
				</figure>
				<figure>
					<i class="huochepiao"></i>
					<figcaption>火车票</figcaption>
				</figure>
				<figure>
					<i class="qichepiao"></i>
					<figcaption>汽车票</figcaption>
				</figure>
			</section>

			<section class="list-margin-top">
				<figure>
					<i class="minsu"></i>
					<figcaption>民宿</figcaption>
				</figure>
				<figure>
					<i class="zhongdianfang"></i>
					<figcaption>钟点房</figcaption>
				</figure>
				<figure>
					<i class="gongnue"></i>
					<figcaption>攻略</figcaption>
				</figure>
				<figure>
					<i class="mengpiao"></i>
					<figcaption>门票</figcaption>
				</figure>
				<figure>
					<i class="tehui"></i>
					<figcaption>特惠</figcaption>
				</figure>	
			</section>
		</section>

		<!-- 我的搜索账单 -->
			<section class="my-list">
				<figure>
					<a  class="account" href=""></a>
					<span>账户</span>
				</figure>
				<figure>
				    <a class="order" href=""></a>
					<span>订单</span>
				</figure>
				<figure>
					<a class="phone" href=""></a>
					<span>电话</span>
				</figure>
			</section>

		<!-- 折扣 -->
		<figure class="discount">
			<a href="">
				<img src="//m.elongstatic.com/static/webapp/hotel/2016/03/v2/img/search_app.jpg">
			</a>
		</figure>

		<!-- 热门城市 -->

		<div class="search-city">
			<div class="search-city-title">
				<p>热门城市</p>
			</div>
			<ul class="city-list">
				<li class="city1"><div><h2>北京</h2><p>共有<span>6410</span>家酒店</p><i class="icon-left"></i></div></li>
				<li class="city2"><div><h2>上海</h2><p>共有<span>6410</span>家酒店</p><i class="icon-left"></i></div></li>
				<li class="city3"><div><h2>广州</h2><p>共有<span>6410</span>家酒店</p><i class="icon-left"></i></div></li>
				<li class="city4"><div><h2>深圳</h2><p>共有<span>6410</span>家酒店</p><i class="icon-left"></i></div></li>
				<li class="city5"><div><h2>香港</h2><p>共有<span>6410</span>家酒店</p><i class="icon-left"></i></div></li>
				<li class="city6"><div><h2>杭州</h2><p>共有<span>6410</span>家酒店</p><i class="icon-left"></i></div></li>
				<li class="city7"><div><h2>苏州</h2><p>共有<span>6410</span>家酒店</p><i class="icon-left"></i></div></li>
				<li class="city8"><div><h2>宁波</h2><p>共有<span>6410</span>家酒店</p><i class="icon-left"></i></div></li>
				<li class="city9"><div><h2>南京</h2><p>共有<span>6410</span>家酒店</p><i class="icon-left"></i></div></li>
				<li class="city10"><div><h2>三亚</h2><p>共有<span>6410</span>家酒店</p><i class="icon-left"></i></div></li>
			</ul>
		</div>

	
	
	
	

	<script src="./assets/jquery/jquery-3.2.1.min.js"></script>
	<script src="./assets/swiper/js/swiper.jquery.min.js"></script>
	<script src="./js/index.js"></script>
	<script src="./js/bootstrap.min.js"></script>
	<script src="./assets/swiper/js/swiper.animate1.0.2.min.js"></script>
</body>
</html>
